<template>
<div id="autoTest" style="width: 6rem;height: 3rem">
  <div class="up">
    <div class="item">
      <p class="ml-3 colorBlue">运行时间：{{time}}</p>
      <!-- <p class="ml-3 colorGrass">运行版本：{{version}}</p> -->
    </div>
  </div>
<!--  <div id="down" v-show="isshow">-->
<!--      <dv-capsule-chart :config="config" style="padding-top:-0.2rem;font-size:12pt;width:5.5rem;height:3.25rem"/>-->
<!--  </div>-->
<!--  柱状图-->
  <div id="autoTestData" style="width: 5.5rem;height: 3rem">
  </div>
</div>
</template>

<script>
// export default {
//   name: "autoTest",
//   mounted() {
//     this.getdata();
//   },
//   data() {
//     return {
//       charts: "",
//       isshow:false,
//       opinionData: [],
//       time:'2021-03-17 11:07',
//       // version:'20210316',
//       config:{
//           data: [
//
//         ],
//         colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
//         unit: '%',
//         showValue: true
//       }
//       // config:[
//       //   {"name": "\u767d\u677f\u573a\u666f", "pass": 0.25, "fail": 0.5625, "broken": 0.1875},
//       //   {"name": "\u622a\u5c4f\u76f8\u5173\u7528\u4f8b", "pass": 0.2857142857142857, "fail": 0.2857142857142857, "broken": 0.42857142857142855},
//       //   {"name": "\u89e6\u63a7\u76f8\u5173\u7528\u4f8b4k", "pass": 0.5555555555555556, "fail": 0.1111111111111111, "broken": 0.3333333333333333},
//       //   {"name": "\u89e6\u63a7\u70e4\u673a\u76f8\u5173\u7528\u4f8b", "pass": 0.0, "fail": 1.0, "broken": 0.0},
//       //   {"name": "\u552e\u540e\u83dc\u5355\u8bbe\u7f6e\u573a\u666f-U\u76d8\u62f7\u65e5\u5fd7", "pass": 0.0, "fail": 1.0, "broken": 0.0},
//       //   {"name": "\u8bbe\u7f6e\u76f8\u5173\u7528\u4f8b", "pass": 1.0, "fail": 0.0, "broken": 0.0},
//       //   {"name": "\u6279\u6ce8\u76f8\u5173\u7528\u4f8b", "pass": 1.0, "fail": 0.0, "broken": 0.0},
//       //   {"name": "\u4fa7\u8fb9\u680f\u76f8\u5173\u7528\u4f8b", "pass": 1.0, "fail": 0.0, "broken": 0.0},
//       //   {"name": "\u754c\u9762\u4ea4\u4e92-\u5e38\u7528\u529f\u80fd", "pass": 1.0, "fail": 0.0, "broken": 0.0},
//       //   {"name": "\u63a5\u53e3\u573a\u666f-\u4e32\u53e3\u76f8\u5173", "pass": 1.0, "fail": 0.0, "broken": 0.0}
//       // ]
//     };
//   },
//   methods: {
//     getdata(){
//         this.$http({ method: 'get',
//                     url: 'show/autotest/?system='+this.$global.system,}).then(response => {
//                     // console.log(response.data);
//                     for(var key in response.data.models) {
//                         // for (var item in key) {
//                         // console.log(response.data.models[key])
//                         const data = {name:response.data.models[key]['name'].substring(0,5),value:Math.round(response.data.models[key]['pass']*100)}
//                         // const data = {name:"<span style='font-size:20px;'>"+response.data.models[key]['name'].substring(0,5)+"</span>",value:Math.round(response.data.models[key]['pass']*100)}
//                         console.log(data)
//                         // return data
//                         if (this.config.data.length<8){
//                           this.config.data.push(data)
//                           // this.config.data.push("<span style='font-size:20px;'>"+data+"</span>")
//                         this.config = { ...this.config }
//                         }
//                         // console.log(this.config.data)
//                     }
//                     this.isshow = true
//                 },
//                 // response => {
//                 //     console.log("error");
//                 // }
//                 );
//     }
//   }
// };
// 用于轮播设置，开始位置，单个间隔数值，结束位置。参考文档，开始位置/结束位置默认0/100
let zoomstart = 0;
let space=10;
let zoomend = 5*space-1;
export default {
  name: "tortureTest",
  mounted() {
    this.getdata();
    this.setTimer();
  },
  data() {
    return {
      timer: null,
      charts: "",
      time:[],
      opinionData: [],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例

      let myChart = this.$echarts.init(document.getElementById("autoTestData"));
      // let test = {"RG-IIB-N86KS-\u666e\u6559\u4e09\u4e2a\u8bfe\u5802\u89e3\u51b3\u65b9\u6848\u573a\u666f-TP": {"pass": 0, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u666e\u6559\u865a\u62df\u5316\u573a\u666f-TP": {"pass": 0, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u63a5\u53e3\u76f8\u5173-TP": {"pass": 5, "fail": 3, "residue": 1}, "RG-IIB-N86KS-\u89e6\u63a7-TP": {"pass": 0, "fail": 2, "residue": 0}, "RG-IIB-N86KS-\u5f00\u5173\u673a-TP": {"pass": 1, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u754c\u9762\u64cd\u4f5c-TP": {"pass": 3, "fail": 0, "residue": 0}}
      // 处理数据
      let test = this.opinionData
      // 通过用例数
      let pass = []
      // 失败用例数
      let fail = []
      // 剩余用例数
      let residue = []
      // 总共用例数
      let all = []
      // 用例模块名称
      let name = []
      // 通过率
      let passr = []
      // 失败率
      let failr = []
      // 剩余率
      let residuer = []
      // 已执行用例数
      let excute = []
      // 模块标记，用于轮播
      let indexd =[]
      for(var key in test) {
        passr.push(test[key]['pass']/test[key]['total']*100)
        failr.push((test[key]['fail']+test[key]['broken'])/test[key]['total']*100)
        residuer.push((test[key]['total']-test[key]['fail']-test[key]['broken']-test[key]['pass'])/test[key]['total']*100)
        name.push(test[key]['name'].substring(0,4));             //属性名（key）
        pass.push(test[key]['pass'])
        fail.push(test[key]['fail']+test[key]['broken'])
        all.push(test[key]['total'])
        excute.push(test[key]['fail']+test[key]['broken']+test[key]['pass'])
        residue.push(test[key]['total']-test[key]['fail']-test[key]['broken']-test[key]['pass'])
        indexd.push(parseInt(key))
      }
      // console.log(indexd)
      var option = {
        // 提示
        tooltip: {
          trigger: 'axis',
          formatter(params){
            return(
                "自动化用例执行情况"+"<br/>"+"通过："+pass[params[3].data]+"<br/>"+"已执行："+excute[params[3].data]+"<br/>"+"总数："+all[params[3].data]
            );
          },
        },
        // 表头
        legend: {
          data: ['通过用例数', '执行用例数', '用例总数'],
          textStyle:{color:'#CCFFFF',fontSize:this.refontSize(14),},
          top: "5%"
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '4%',
          width:this.refontSize(420),
          height:this.refontSize(180),
          containLabel: true
        },
        // x轴设置
        xAxis: {
          type: 'value',
          // name:"个",
          // nameLocation:"end",
          axisLine:{
            lineStyle:{
              color:"#CCFFFF",
            }
          },
          axisLabel:{
            color:"#CCFFFF",
            fontSize:this.refontSize(14),
            formatter:'{value}个'
          },
          splitLine:{
            show:false
          }
        },
        // y轴设置
        yAxis: {
          type: 'category',
          data: name,
          axisLine:{
            lineStyle:{
              color:"#CCFFFF",
            }
          },
          axisLabel:{
            color:"#CCFFFF",
            fontSize:this.refontSize(14),
          },
          splitLine:{
            show:false
          },

        },
        // 数据
        series: [
          {
            name: '通过用例数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              fontSize:this.refontSize(12),
              formatter(params){
                // console.log(params)
                var redata = pass[params.dataIndex]
                if(redata==0){
                  redata = ""
                }
                return(
                    redata
                );
              },
            },
            itemStyle: {
              color: '#32c5e9',
              // borderRadius: [2, 2, 20, 20]
            },
            emphasis: {
              focus: 'series'
            },
            data: pass
          },
          {
            name: '执行用例数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              fontSize:this.refontSize(12),
              formatter(params){
                // console.log(params)
                var redata = excute[params.dataIndex]
                var passdata = pass[params.dataIndex]
                if(redata==passdata){
                  redata = ""
                }
                return(
                    redata
                );
              },
            },
            itemStyle: {
              color: '#EC7063',
              // borderRadius: [0, 0, 20, 20]
            },
            emphasis: {
              focus: 'series'
            },
            data: fail
          },
          {
            name: '用例总数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              position: 'right',       //  位置设为right
              fontSize:this.refontSize(12),
              formatter(params){
                // console.log(params)
                var redata = all[params.dataIndex]
                return(
                    redata
                );
              },
            },
            itemStyle: {
              color: '#CCCCCC'
            },
            emphasis: {
              focus: 'series'
            },
            data: residue
          },
          //  只显示数据，总数。不显示柱状图
          {                               //新的一个柱子 注意不设stack
            name: '',
            type: 'bar',
            barGap: '-100%',         // 左移100%，stack不再与上面两个在一列
            // label: {
            //   normal: {
            //     show: true, //显示数值
            //     position: 'right',       //  位置设为right
            //     formatter: '{c}',
            //     textStyle: { color: '#CCFFFF' } //设置数值颜色
            //   }
            // },
            itemStyle: {
              normal: {
                color: 'rgba(128, 128, 128, 0)'    // 设置背景颜色为透明
              }
            },
            data: indexd,
          }
        ],
        // 轮播设置
        dataZoom: [
          {
            id: 'dataZoomY',
            type: 'inside',
            // orient:'vertical',
            yAxisIndex: 0,
            show: false,
            start: zoomstart,
            end: zoomend,//默认显示条柱数
          }
        ],
      };
      myChart.setOption(option);
    },
    // 请求自动化测试数据
    getdata(){
      this.$http({ method: 'get',
        url: 'show/autotest/?system='+this.$route.query.project,}).then(response => {
            // console.log(response.data.models);
            this.opinionData =response.data.models;
            this.time = response.data.time
            //计算轮播单个间隔
            space = 100/this.opinionData.length
            this.SetEchart()
          },
          // response => {
          //     console.log("error");
          // }
      );
    },
    // 轮播定时
    setTimer() {
      if(this.timer == null) {
        this.timer = setInterval( () => {
          // console.log('开始定时...每过一秒执行一次')
          zoomstart += 5*space;
          zoomend += 5*space;
          if (zoomend >= 100) {
            zoomend = 5*space-1;
            zoomstart = 0
          }

          // console.log(zoomstart,zoomend)
          this.SetEchart()
        }, 5000)
        // 离开当前界面结束定时
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.timer);
          this.timer = null;
        })
      }
    },
          }
};
</script>

<style lang="scss" scoped>
#autoTest{
  .up{
    .item{
      padding-top:0.2rem ;
      font-size: 0.2rem;
      p{
        font-size: 0.2rem;
      }
    }
  }
}
#down{
  dv-capsule-chart{
    .label-column{
      font-size: 0.2rem;
    }
  }
}
.label-column{
  font-size: 0.2rem;
}
</style>